<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('支付管理')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
<div class="main-content">
    <form id="form-add" class="form-horizontal" th:object="${fund}">
        <input name="fundId" th:field="*{id}" type="hidden">

        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
                <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:src="@{/js/jquery.tmpl.js}"></script>
<script th:inline="javascript">

    var prefix = ctx + "system/fund";

    $(function() {
        // 初始化数据, 可以由后台传过来
        var data =  [[${pays}]];
        var options = {
            data: data,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [{
                checkbox: true
            },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        var columnId = $.common.sprintf("<input type='hidden' name='pay[%s].id' value='%s'>", index, row.id);
                        return columnIndex + $.table.serialNumber(index) + columnId;
                    }
                },{
                    field: 'amt',
                    align: 'center',
                    title: '支付金额',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='pay[%s].amt' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'payDate',
                    align: 'center',
                    title: '支付日期',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='pay[%s].payDate' value='%s' placeholder='yyyy-MM-dd'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'his',
                    align: 'center',
                    title: '支付历史',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='pay[%s].his' value='%s'>", index, value);
                        return html;
                    }
                }]
        };
        $.table.init(options);
    });


    function submitHandler(index, layero){
        var data = $("#form-add").serializeArray();
        $.ajax({
            type : "POST",
            url : prefix + "/addPay",
            data : {data: JSON.stringify(data)},
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                $.operate.successCallback(data);
            }
        });
    }
    function addColumn() {
        var row = {
            amt: "",
            payDate: "",
            his: ""
        }
        sub.addColumn(row);
    }
    $("#bootstrap-table").on("post-body.bs.table", function (e, args) {
        $("input[name$='payDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true,
            pickerPosition:'bottom-right'
        });
    });

</script>
</body>
</html>
